<template>
  <el-dialog v-model="dialogFormVisible" @close="handleClose"
             :close-on-click-modal="false" title=" " width="940px"
             :z-index="1000000000">
    <div class="upload" v-loading="uploadLoading">
      <el-upload class="upload-demo"
                 :show-file-list="false"
                 :multiple="multiple"
                 ref="upload"
                 action=""
                 accept="image/*" :http-request="handleUploadImage">
        <el-button size="mini" type="primary" icon="UploadFilled" >点击图片上传</el-button>
      </el-upload>
    </div>
  </el-dialog>
</template>
<script setup>
import KVA from '@/utils/kva.js'
import {uploadFile} from "@/api/upload";
const uploadLoading = ref(false)
const emits = defineEmits(["success"])
const dialogFormVisible = ref(false)
const props = defineProps({
  multiple: {
    type: Boolean,
    default: true
  },
  path: {
    type: String,
    default: "courses"
  },
  oldName: {
    type: String,
    default: ""
  }
})

const handleUploadImage = async (file) => {
  try {
    uploadLoading.value = true
    const formData = new FormData();
    formData.append('file', file.file);
    const resp = await uploadFile(formData,props.path,props.oldName)
    emits('success', resp.data.url,resp.data)
    uploadLoading.value = false
  }catch (e) {
    uploadLoading.value = false
    KVA.error("上传失败...")
  }
}



const handleClose = () => {
  dialogFormVisible.value = false
}

const handleOpen = () => {
  dialogFormVisible.value = true
}

defineExpose({
  handleClose,
  handleOpen
})

</script>

<style lang="scss" scoped>
.upload {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border:2px dotted #ccc;
  padding:20px;
}
</style>
